<template>
  <div>
    <div class="row">
      <div class="text-subtitle2 q-pa-sm">热门专题</div>
      <q-space/>
      <!-- <q-item class="" dense clickable to="/topic">全部</q-item> -->
    </div>
    <div>
      <q-list class="cursor-pointer" flat
              v-for="(topic, index) in topics" :key="topic._id" :label="topic.name">
        <q-item class="text-left topicList" dense clickable v-ripple @click="clickTopic(topic)">
          <span class="" style="">
            {{ index + 1 }}.&nbsp;
          </span>
          <span class="" style="">{{ topic.name }}</span>
        </q-item>
      </q-list>
    </div>
  </div>
</template>

<script lang="ts">
import iTool from 'src/api/tool'
import { defineComponent } from 'vue'

export default defineComponent({
  data () {
    return {
      topics: []
    }
  },
  async mounted () {
    const topics = await iTool.findAllTopic({ query: { status: 1 } })
    this.topics = topics.slice(0, 10)
  },
  methods: {
    async clickTopic (topic: { name: string, tags: { _id: string }[] }) {
      await this.$router.push({
        name: 'AppIndex',
        params: {
          index: 'topic'
        },
        query: {
          name: topic.name,
          ids: topic.tags.map((e) => e._id).join(',')
        }
      })
    }
  }
})

</script>

<style lang="scss">
.topicList {
  color: $c4;
  font-weight: bold;
}

</style>
